<template>
	<view>
		<view class="left-arrow" :style="{ top: arrowTop }" @click="clickBack">
			<uni-icons type="left" color="#FFF" size="30"></uni-icons>
		</view>
		<scroll-view scroll-y :style="{ height: scrollHeight }">
			<view class="img-box">
				<image class="top-img" :src="baseUrl + goodsDetail.goodImg" mode="aspectFill" />
			</view>
			<view class="info-box">
				<view class="num-box">
					<view class="price"><text
							class="icon">￥</text>{{ userInfo.isMember && userInfo.isMember == 2? goodsDetail.memberPrice : goodsDetail.retailPrice }}
					</view>
					<view class="sale-num">月售{{ goodsDetail.totalSellCount }}</view>
				</view>
				<view class="name">{{ goodsDetail.goodName }}</view>
			</view>
			<!-- <view class="common-box">
        <view class="common-title">商品规格</view>
        <view class="common-content">
          <view class="specifications" v-for="(item, index) in specificationsConfig" :key="index">
            <view class="label">{{ item.label }}</view>
            <view class="value">{{ goodsDetail[item.key] }}</view>
          </view>
        </view>
      </view> -->
			<view class="common-box">
				<view class="common-title">商品详情</view>
				<view class="common-content">
					<image style="width: 100%;" v-for="item,index in imgs" :key="index" :src="baseUrl+item"
						mode="widthFix"></image>
					<text style="display: block; margin-top: 10rpx;"
						v-if="goodsDetail.goodText !==null">{{goodsDetail.goodText}}</text>
				</view>
			</view>
		</scroll-view>
		<view class="bottom-box" :style="{ paddingBottom: safeHeight + 5 + 'px' }">
			<view class="car-box" @click="clickCar">
				<image class="car-icon" :src="baseIconUrl + 'icon_car.png'" mode="aspectFill" />购物车
			</view>
			<view class="add-btn" @click="addToshopcar">加入购物车</view>
			<view class="buy-btn" @click="buy">立即购买</view>
		</view>
	</view>
</template>

<script>
	import {
		baseUrl,
		baseImgUrl,
		baseIconUrl
	} from '@/config'
	export default {
		name: 'GoodsDetail',
		data() {
			return {
				storeId: '',
				baseUrl,
				baseImgUrl,
				baseIconUrl,
				scrollHeight: '',
				safeHeight: '',
				arrowTop: '',
				specificationsConfig: [{
						label: '规格1',
						key: 'specifications1'
					},
					{
						label: '规格2',
						key: 'specifications2'
					},
					{
						label: '规格3',
						key: 'specifications3'
					}
				],
				goodsDetail: {},
				userInfo: {},
				imgs: []
			}
		},
		onLoad(options) {
			this.storeId = options.storeId
			this.getDetails(options.id)
			this.safeHeight = this.$store.getters.heightData.safeHeight
			this.arrowTop = this.$store.getters.heightData.navBarHeight - 33 + 'px'
		},
		onShow() {
			const userInfo = this.$store.getters.userInfo
			if (Object.keys(userInfo).length > 0) this.userInfo = userInfo
		},
		onReady() {
			this.getBottomBoxHeight()
		},
		methods: {
			getBottomBoxHeight() {
				this.$nextTick(() => {
					// 创建查询对象
					setTimeout(() => {
						const query = uni.createSelectorQuery().in(this)

						// 选择我们想要的元素
						query.select('.bottom-box').boundingClientRect(data => {
							// data是一个包含元素尺寸信息的对象
							if (data) {
								// 获取元素高度
								const height = data.height
								const heightConfig = this.$store.getters.heightData
								this.scrollHeight = heightConfig.noTabMainHeight - height +
									heightConfig.safeHeight + heightConfig.navBarHeight + 'px'
							}
						}).exec()
					}, 200)
				})
			},
			clickBack() {
				uni.navigateBack()
			},
			clickCar() {
				uni.navigateTo({
					url: `/subPages/store/shoppingCart?storeId=${this.storeId}`
				})
			},
			async getDetails(id) {
				const res = await this.$GET(`/fx/store/good/${id}`)
				if (res.code == 200) {
					console.log(res)
					this.goodsDetail = {
						...res.data
					}
					if (res.data.goodDetail != null) {
						this.imgs = res.data.goodDetail.split(',')
					}
				}
			},
			async buy() {
				const shop_car = this.$store.getters.shop_car
				let items = {
					count: 1,
					...this.goodsDetail
				}
				let newArr = []
				newArr.push(items)
				this.$store.commit('SET_SETTLE', newArr)
				uni.navigateTo({
					url: `/subPages/store/confirmOrder?storeId=${this.storeId}`
				})
			},
			async addToshopcar() {
				const items = {
					count: 1,
					...this.goodsDetail
				}
				const shop_car = this.$store.getters.shop_car
				if (shop_car.cartList && shop_car.cartList.length > 0) {
					if (shop_car.cartList.some(item => item.storeId != items.storeId)) {
						uni.showToast({
							icon: 'none',
							title: '购物车无法添加不同店铺的商品'
						})
					} else {
						shop_car.cartList.push(items)
						this.$store.commit('SET_SHOP_CAR', shop_car)
						uni.redirectTo({
							url: `/subPages/store/shoppingCart?storeId=${this.storeId}`
						})
						// uni.showToast({
						// 	title: '商品已添加到购物车中',
						// 	duration: 700
						// })
						// setTimeout(() => {
						// 	uni.navigateBack()
						// }, 700)
					}
				} else if (shop_car.cartList && shop_car.cartList.length == 0) {
					if (shop_car.cartList.some(item => item.id === items.id)) {
						uni.showToast({
							icon: 'none',
							title: '购物车已包含当前商品，请勿重复添加'
						})
					} else {
						shop_car.cartList.push(items)
						this.$store.commit('SET_SHOP_CAR', shop_car)
						uni.redirectTo({
							url: `/subPages/store/shoppingCart?storeId=${this.storeId}`
						})
						// uni.showToast({
						// 	title: '商品已添加到购物车中',
						// 	duration: 700
						// })
						// setTimeout(() => {
						// 	uni.navigateBack()
						// }, 700)
					}
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.img-box {
		width: 100%;
		height: 750rpx;

		.top-img {
			width: 100%;
			height: 100%;
		}
	}

	.left-arrow {
		position: fixed;
		left: 0;
		z-index: 999;
	}

	.info-box {
		width: 100%;
		padding: 24rpx 28rpx;
		background-color: #FFF;

		.num-box {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.price {
				font-size: 50rpx;
				color: #FA462C;

				.icon {
					font-size: 30rpx;
				}
			}

			.sale-num {
				font-size: 28rpx;
				color: #808080;
			}
		}

		.name {
			margin-top: 10rpx;
			font-size: 30rpx;
			font-weight: 500;
			line-height: 36rpx;
		}
	}

	.common-box {
		width: 100%;
		margin-top: 20rpx;
		padding: 24rpx 28rpx;
		background-color: #FFF;

		.common-title {
			margin-bottom: 20rpx;
			font-size: 30rpx;
			font-weight: 500;
		}

		.common-content {
			.detail-img {
				width: 100%;
			}

			.specifications {
				display: flex;
				height: 60rpx;

				&:first-child {
					border-top: 2rpx solid #e6e6e6;
				}

				.label,
				.value {
					display: flex;
					align-items: center;
					width: 40%;
					padding: 0 10rpx;
					border: 2rpx solid #e6e6e6;
					border-top: none;
					font-size: 24rpx;
					color: #808080;
				}

				.label {
					border-right: none;
				}

				.value {
					width: 60%;
					color: #000;
				}
			}
		}
	}

	.bottom-box {
		position: fixed;
		bottom: 0;
		display: flex;
		padding: 10rpx 28rpx 0;
		align-items: center;
		width: 100%;
		border-top: 2rpx solid rgba(0, 0, 0, .1);
		background-color: #FFF;

		.car-box {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-right: 38rpx;
			font-size: 20rpx;
			color: #808080;

			.car-icon {
				width: 48rpx;
				height: 48rpx;
				margin-bottom: 4rpx;
			}
		}

		.add-btn,
		.buy-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 288rpx;
			height: 80rpx;
			border: 2rpx solid #0b3f35;
			border-radius: 40rpx;
			font-size: 30rpx;
			color: #0b3f35;
			background-color: #FFF;
		}

		.buy-btn {
			margin-left: 20rpx;
			color: #FFF;
			background-color: #0b3f35;
		}
	}
</style>